import React from 'react';
import { GameTurn } from '../../types';
import MarkdownRenderer from '../MarkdownRenderer';

// Memoized component for past turns to improve performance
const PastTurn = React.memo(({ turn, index }: { turn: GameTurn; index: number }) => (
    <div className="mb-4 pb-2 border-b border-gray-700 last:border-b-0">
        <p className="text-gray-400 text-xs mb-1">回合 {index + 1}</p>
        {turn.customPlayerInput && <p className="mb-2 text-sm text-yellow-400 italic">你的行动: {turn.customPlayerInput}</p>}
        {turn.chosenOptionIndex !== undefined && turn.options[turn.chosenOptionIndex] && <p className="mb-2 text-sm text-green-400 italic">你的选择: {turn.options[turn.chosenOptionIndex]}</p>}
        <MarkdownRenderer content={turn.narrative} />
    </div>
));

export default PastTurn;
